<template functional>
  <a-sub-menu :key="props.menu.id">
    <span slot="title">
      <i class="icon aufontAll" :class="props.menu.icon ? props.menu.icon : 'h-icon-all-folder-open-o'"></i>
      <span :class="props.specStyle  ? 'specStyles' : ''"> {{props.isChinese ? props.menu.name :  props.menu.name_i18n['en']}}</span>
    </span>
    <template v-for="(childMenu) in props.menu.children">
      <sub-menu
        :key="childMenu.id"
        :menu="childMenu"
        :specStyle="props.specStyle"
        :fn="props.fn"
        :locale="props.locale"
        :isChinese="props.isChinese"
        v-if="childMenu.children"

      ></sub-menu>
      <a-menu-item :key="childMenu.id" @click="props.fn(childMenu)" v-else>
        
        <router-link :title="props.isChinese ? childMenu.name:typeof(childMenu.name_i18n) === 'string' ?JSON.parse(childMenu.name_i18n)['en']:childMenu.name_i18n['en']" :to="''" v-if="childMenu.type === 'BizModel'">
          <i class="icon aufontAll" :class="childMenu.icon"></i>
          <span :class="props.specStyle ? 'specStyles' : ''">{{props.isChinese ? childMenu.name:typeof(childMenu.name_i18n) === "string" ?JSON.parse(childMenu.name_i18n)['en']:childMenu.name_i18n['en']}}</span>
        </router-link>
        <a :title="props.isChinese ? childMenu.name:typeof(childMenu.name_i18n) === 'string' ?JSON.parse(childMenu.name_i18n)['en']:childMenu.name_i18n['en']" v-else>
          <i class="icon aufontAll" :class="childMenu.icon"></i>
          <span :class="props.specStyle ? 'specStyles' : ''">{{ props.isChinese ? childMenu.name:typeof(childMenu.name_i18n) === "string" ?JSON.parse(childMenu.name_i18n)['en']:childMenu.name_i18n['en']}}</span>
        </a>
      </a-menu-item>
    </template>
  </a-sub-menu>
</template>
<script>
export default {
  name: "SubMenu",
  components: {},
  props: {
    menu: {},
    fn:void 0,
    specStyle: Boolean,
    locale:{
      type:String,
      default:"zh"
    },
    isChinese:{
       type:Boolean
    }
  }
};
</script>

<style scoped></style>